<template>
  <div v-if="controlInfo.type === 'link'">
    <a
      class="cell underline"
      ref="control"
      type="link"
      @click="handleClickLink"
    >{{ controlInfo.label || showText }}</a>
    <a-drawer
      title="修改结果值"
      placement="right"
      :closable="false"
      :visible="visibleDrawer"
      @close="handleCancel"
    >
      <a-input-number
        v-if="factor.dataType === 'number'"
        v-model="tempValue"
        :disabled="table.readOnly"
      ></a-input-number>
      <a-input v-else v-model="tempValue" :disabled="table.readOnly"></a-input>
      <div
        class="drawer-button"
        :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
      >
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleConfirm">确定</a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-modal v-model="visibleModal" title="修改因子值" :closable="true" @ok="handleConfirm">
      <a-input-number
        v-if="factor.dataType === 'number'"
        v-model="tempValue"
        :disabled="table.readOnly"
      ></a-input-number>
      <a-input v-else v-model="tempValue" :disabled="table.readOnly"></a-input>
    </a-modal>
  </div>
  <span v-else-if="!isActive" class="cell" @click="handleClick">{{ showText }}</span>
  <div class="cell-box" v-else>
    <a-select
      size="large"
      ref="control"
      v-if="controlInfo.type === 'select'"
      :options="controlInfo.options"
      :value="value"
      @change="handleSelectChange"
      @blur="handleFocus"
      @keyup.enter="handleFocus"
    ></a-select>
    <a-input-number
      v-else-if="factor.dataType === 'number'"
      size="large"
      ref="control"
      :value="value"
      @change="handleNumberChange"
      @blur="handleFocus"
      @keyup.enter="handleFocus"
    ></a-input-number>
    <a-input
      v-else
      size="large"
      ref="control"
      :value="value"
      @change="handleChange"
      @blur="handleFocus"
      @keyup.enter="handleFocus"
    ></a-input>
  </div>
</template>
<script>
export default {
  name: 'EditCell',
  props: {
    table: Object,
    text: [String, Number],
    showText: [String, Number],
    controlInfo: Object,
    factor: Object,
  },
  data() {
    return {
      value: this.text,
      tempValue: null,
      isActive: this.table.isActive ?? false,
      visibleDrawer: false,
      visibleModal: false,
    }
  },
  watch: {
    text(newVal) {
      console.log('newVal', newVal)
      this.value = newVal
    },
    'table.isActive': {
      handler(newValue) {
        if (this.table.readOnly) {
          return
        }
        this.isActive = newValue
        if (newValue === false) {
          const { value } = this
          this.$emit('change', value)
        }
      },
    },
  },
  methods: {
    //点击单元格
    handleClick() {
      if (this.table.readOnly) {
        return
      }
      this.isActive = true
      this.$nextTick(() => {
        this.$refs?.control.focus()
      })
    },
    //修改input框数据
    handleChange(e) {
      this.value = e.target.value
    },
    //修改inputnumber数据
    handleNumberChange(value) {
      this.value = value
    },
    //修改选择框数据
    handleSelectChange(value) {
      this.value = value
    },
    //点击扩展录入连接
    handleClickLink(e) {
      this.tempValue = this.value
      if (this.controlInfo.openType === 'drawer') {
        this.visibleDrawer = true
      } else if (this.controlInfo.openType === 'modal') {
        this.visibleModal = true
      }
    },
    //确认数据修改
    handleConfirm() {
      if (this.controlInfo.openType === 'drawer') {
        this.visibleDrawer = false
      } else if (this.controlInfo.openType === 'modal') {
        this.visibleModal = false
      }
      if (this.table.readOnly) {
        return
      }

      this.$emit('change', this.tempValue)
    },
    //取消抽屉数据修改
    handleCancel() {
      this.visibleDrawer = false
    },
    //失去焦点
    handleFocus() {
      this.handleComplete()
    },
    //修改数据确认
    handleComplete() {
      const { value } = this
      this.isActive = false
      this.$emit('change', value)
    },
  },
}
</script>
<style scoped>
::v-deep .ant-input,
::v-deep .ant-select-selection {
  border-radius: 0px;
}
::v-deep .ant-select,
.ant-input-number {
  width: 100%;
  height: 100%;
}
.cell-box {
  display: flex;
  align-items: center;
}
.cell {
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.underline {
  text-decoration: underline;
}
</style>